<template>
    <el-card class="label-box-card" :class="type" shadow="hover">
        <div class="text item">
            <a class="label-name">{{label.name}}</a>
        </div>
        <div class="text item">
            <span style="float: left">关注数量：{{label.attentionCount}}</span>
            <span style="float: right">项数量：{{label.itemCount}}</span>
        </div>
        <br>
        <div class="label-attention-btn">
            <el-button v-if="!attentionLabel(label.id)"
                       type="success"
                       size="mini"
                       :disabled="label.status===2"
                       @click="attention" round>关注
            </el-button>
            <el-button v-else type="danger" size="mini" @click="removeAttention" round>取消关注</el-button>
            <el-button type="text" @click="goToAttentionUsers">查询关注该标签的用户</el-button>
        </div>
    </el-card>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import { type } from '@/constant'

    export default {
        name: 'labelCard',
        props: {
            label: {
                type: Object,
                required: true
            },
            link: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        data () {
            return {
                type: null
            }
        },
        mounted () {
            this.type = type[Math.floor(Math.random() * type.length)]
            if (this.getUser) {
                this.action(this.currentAttentionLabelsAction())
            }
        },
        computed: {
            ...mapGetters({
                getUser: 'user/getUser',
                attentionLabel: 'label/attentionLabel'
            })
        },
        methods: {
            ...mapActions('label', {
                currentAttentionLabelsAction: 'currentAttentionLabels',
                attentionLabelAction: 'attentionLabel',
                removeAttentionLabelAction: 'removeAttentionLabel'
            }),
            attention () {
                this.action(this.attentionLabelAction(this.label.id), data => {
                    this.$message.success('关注成功')
                    if (this.link) {
                        this.$emit('changeLabelAttention', { id: this.label.id, inc: 1 })
                    } else {
                        this.label.attentionCount++
                    }
                    this.action(this.currentAttentionLabelsAction())
                })
            },
            removeAttention () {
                this.action(this.removeAttentionLabelAction(this.label.id), data => {
                    this.$message.success('取消关注成功')
                    if (this.link) {
                        this.$emit('changeLabelAttention', { id: this.label.id, inc: -1 })
                    } else {
                        this.label.attentionCount--
                    }
                    this.action(this.currentAttentionLabelsAction())
                })
            },
            goToAttentionUsers () {
                this.$router.push(`/attention/label/${this.label.id}`)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/scss';

    .text {
        font-size: 14px;
    }

    .item {
        padding: 10px 0;

        .label-name {
            font-size: 18px;
            font-weight: bolder;
        }

        a {
            font-weight: bolder;
            font-size: 32px;

            text-decoration: none;
            cursor: pointer;
        }

        a:hover {
            color: rgba(255, 151, 60, 0.8);
        }

        a:active {
            color: rgba(255, 86, 25, 0.8);
        }

    }

    .label-box-card {
        z-index: 999;

        .label-attention-btn {
            text-align: center;
        }

    }
</style>
